<html><head>
    <meta charset="utf-8">
    <title>手写穿越时空</title>

    <style>
        .wall{
            background: url(./bg.jpg);
            background-size: cover;
        }
        html, body{
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        body{
            background: #000;
            text-align: center;
        }

        body:before{
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        .scene{
            display: inline-block;
            vertical-align: middle;
            perspective: 5px;
            perspective-origin: 50% 50%;
            position: relative;
        }

        .wrap{
            position: absolute;
            width: 1000px;
            height: 1000px;
            left: -500px;
            top: -500px;
            transform-style: preserve-3d;
            animation: move 24s infinite linear;
            animation-fill-mode: forwards;
        }

        .wrap:nth-child(2){
            animation: move 24s infinite linear;
            animation-delay: 12s;
        }

        .wall {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
            animation: fade 24s infinite linear;
            animation-delay: 0s;
        }

        .wrap:nth-child(2) .wall {
            animation-delay: 12s;
        }

        .wall-right {
            transform: rotateY(90deg) translateZ(500px);
        }

        .wall-left {
            transform: rotateY(-90deg) translateZ(500px);
        }

        .wall-top {
            transform: rotateX(90deg) translateZ(500px);
        }

        .wall-bottom {
            transform: rotateX(-90deg) translateZ(500px);
        }

        .wall-back {
            transform: rotateX(180deg) translateZ(500px);
        }

        @keyframes move {
            0%{
                transform: translateZ(-500px) rotate(0deg);
            }
            100%{
                transform: translateZ(500px) rotate(0deg);
            }
        }

        @keyframes fade {
            0%{
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            75% {
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
        .ball {
            animation: float 3.5s ease-in-out infinite;
            height: 200px;
            width: 200px;
            margin: auto;

            border-radius: 50%;
            position: absolute;
            top: 60%;
            left:calc(50% - 100px);
            background: radial-gradient(
                    circle at 75% 30%,
                    white 5px,
                    aqua 8%,
                    darkblue 60%,
                    aqua 100%
            );
            box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #eaf5fc,
            inset 88px 0px 60px #c2d8fe, inset -20px -60px 100px #fde9ea,
            inset 0 50px 140px #fde9ea, 0 0 90px #fff;
        }

        @keyframes float {
            0% {
                transform: translatey(0px);
            }
            50% {
                transform: translatey(-80px);
            }
            100% {
                transform: translatey(0px);
            }
        }


        @media only screen and (max-width: 500px) {
            .ball {
                animation: float 4.5s ease-in-out infinite;
                height: 120px;
                width: 120px;

                background: radial-gradient(
                        circle at 65% 35%,
                        white 5px,
                        aqua 15%,
                        darkblue 50%,
                        aqua 100%
                );
                box-shadow: inset 0 -20px 30px #fff, inset 40px 0 46px #eaf5fc,
                inset 58px 0px 60px #c2d8fe, inset -8px -30px 100px #fde9ea,
                inset 0 20px 110px #fde9ea, 0 0 90px #fff;
            }


            @keyframes float {
                0% {
                    transform: translatey(300px);
                }
                50% {
                    transform: translatey(-250px);
                }
                100% {
                    transform: translatey(300px);
                }
            }
        }
    </style>

</head>
<body>

<div class="scene">
    <div class="wrap">
        <div class="wall wall-right"></div>
        <div class="wall wall-left"></div>
        <div class="wall wall-top"></div>
        <div class="wall wall-bottom"></div>
        <div class="wall wall-back"></div>
    </div>
    <div class="wrap">
        <div class="wall wall-right"></div>
        <div class="wall wall-left"></div>
        <div class="wall wall-top"></div>
        <div class="wall wall-bottom"></div>
        <div class="wall wall-back"></div>
    </div>
</div>
<div class="ball">

</div>





</body></html>